<template>
  <div class="ordering">
    <!-- 面包屑 -->
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item :to="{ path: 'adminhome' }">管理员</el-breadcrumb-item>
      <el-breadcrumb-item>课程设计任务</el-breadcrumb-item>
      <el-breadcrumb-item>发布历史</el-breadcrumb-item>
    </el-breadcrumb>

    <div>
      <h2>课程设计任务发布历史</h2>
    </div>

    <!-- 所有课程设计任务内容 -->
    <el-table :data="filterTableData" height="550" style="width: 100%; margin-top: 2%;">
      <el-table-column prop="enrolDate" label="开始时间" :formatter="formatDate" min-width="100" />
      <el-table-column prop="courseName" label="课题名称" min-width="100" />
      <el-table-column prop="adviserName" label="指导教师" min-width="100" />
      <el-table-column prop="className" label="班级" min-width="100" />
      <el-table-column fixed="right" label="课题详情" width="150">
        <template #header>
          <el-input v-model="search" size="small" placeholder="查询班级" />
        </template>
        <template #default="scope">
          <el-button link type="primary" @click="toDetail(scope.row.practicalId)" size="small">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script setup>
import { ArrowRight, Calendar, Search, Plus } from '@element-plus/icons-vue'
import { ref, onBeforeMount, computed } from 'vue'
import { useRouter } from 'vue-router'
import requests from '@/api/ajax.js'

const router_useRouter = useRouter()

function toDetail(practicalId) {

  const asd = requests({ url: "/inner/taskbaseVo/" + practicalId, method: "get", }).then(res => {

    if (Object.keys(res.rdata).length === 0) {
      ElMessage({
        message: '教师还未发布该课程设计任务',
        type: 'error',
      })
    } else {

      router_useRouter.push({
        path: 'courseDetail',
        query: { practicalId: practicalId }
      })
    }

  })
    .catch(err => {
      console.error(err);
    });

}
onBeforeMount(() => {
  //初始显示老师所有的发布题目
  const asd = requests({ url: "excel/allcourseTaskVo", method: "get", }).then(res => {

    myPublish.value = res.rdata


  })
    .catch(err => {
      console.error(err.data);
    });
})

const myPublish = ref([{
  adviserId: '',
  adviserName: '',
  classId: '',
  className: '',
  content: '',
  courseId: '',
  courseName: '',
  endDate: '',
  enrolDate: '',
  majorName: '',
  memberId: '',
  memberMax: '',
  onloadDate: '',
  planId: '',
  practicalId: '',
  practicalType: '',
  processId: '',
  publishId: '',
  scaleRule: '',
  startDate: '',
  stuId: '',
  stuName: '',
  stuPhone: '',
  taskName: '',
  teachId: '',
  teachName: '',
  teacherId: '',
  teacherName: '',
  teacherPhone: '',
  teamId: '',
  teamState: '',
  topicDate: '',
  topicId: '',
  topicState: '',
  topicTeamId: '',
  topicType: '',
  typeStr: '',
}])


//时间格式修改为YY-MM
let i = 0

function formatDate(row, column, cellValue, index) {
  let format = 'YYYY-mm-dd'
  let date = new Date(cellValue);
  const dataItem = {
    'Y+': date.getFullYear().toString(),
    'm+': (date.getMonth() + 1).toString(),
    'd+': date.getDate().toString(),
  }
  Object.keys(dataItem).forEach((item) => {
    const ret = new RegExp(`(${item})`).exec(format);
    if (ret) {
      format = format.replace(ret[1], ret[1].length === 1 ? dataItem[item] : dataItem[item].padStart(ret[1].length, '0'));
    }
  });
  /*  dateFilters.value = format */
  //时间选择栏
  /*  let dateFilters = ref([])
   dateFilters = format */
  // for(let i=0 ; i<myPublish.length;i++){
  //   const obj = ref([])
  //   obj.text = 
  /*   myPublish.value.courseDate = ref(format);
    console.log(myPublish.value.courseDate) */
  console.log(format)
  return format
}
function changeDate() {
  for (let i = 0; i < myPublish.value.length; i++) {
    const obj = {}//每次循环创建一个新的对象
    obj.courseDate = myPublish.value[i].courseDate
    publishtask.value.push(obj);
    publishtask.value[i].courseValue = myPublish.value[i].courseDate
  }

}

//table中的搜索框
const search = ref('')
const filterTableData = computed(() =>
  myPublish.value.filter(
    (data) =>
      !search.value ||
      data.className.toLowerCase().includes(search.value.toLowerCase())
  )
)

</script>
<style setup></style>